<!--
 * @Author: wangzm
 * @Date: 2020-01-19 10:44:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-10 10:56:05
 * @Description: file content
 -->
<template>
  <view class="search-bar" :style="'border-radius: ' + borderRadius + ';background: ' + searchBarBg">
    <image v-if="isLight" class="icon" src="/static/images/icon/icon_search.png" mode="aspectFit" />
    <image v-else class="icon" src="/static/images/icon/icon_search_grey.png" mode="aspectFit" />
    <input
      v-model="value"
      :focus="focus"
      class="input"
      :placeholder-class="isLight ? 'lightPInput' : 'pInput'"
      type="text"
      maxlength="30"
      :placeholder="placeholder"
      :style="'text-align: ' + textAlign"
      :disabled="disabled"
      @input="change"
      @focus="handleFocus"
      @confirm="search"
    />
    <image v-show="value" class="icon-clear" src="/static/images/icon/icon_close_grey.png" @click.stop="clear" />
  </view>
</template>
<script>
export default {
  name: 'SerachBar',
  props: {
    keyword: {
      type: String,
      default: ''
    },
    focus: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: 'rgba(255,255,255,0.9)'
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    borderRadius: {
      type: String,
      default: '10rpx'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isLight: {
      // 是否是light模式
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: this.keyword
    }
  },
  computed: {
    searchBarBg: function() {
      return this.isLight ? 'rgba(255, 255, 255, 0.3)' : this.background
    }
  },
  methods: {
    setValue(value) {
      this.value = value
    },
    change(e) {
      if (e.detail) {
        this.$emit('change', e.detail.value)
      }
    },
    handleFocus() {
      this.$emit('focus')
    },
    search() {
      this.$emit('search', this.value)
    },
    clear() {
      this.value = ''
      this.$emit('clear')
    }
  }
}
</script>
<style lang="scss">
.search-bar {
  @include flex;
  @include a-center;
  // @include shadow;
  width: 100%;
  height: 58rpx;
  padding: 0 20rpx;
  box-sizing: border-box;

  .icon {
    width: 30rpx;
    height: 30rpx;
    // #ifdef MP-WEIXIN
    margin-bottom: 1px;
    // #endif
  }
  .input {
    @include sub-item;
    font-size: 26rpx;
    padding-left: 20rpx;
    padding-right: 60rpx;
    width: 100%;
    box-sizing: border-box;
  }
  .pInput {
    color: #999;
  }
  .lightPInput {
    color: #fff;
  }
  .icon-clear {
    width: 28rpx;
    height: 28rpx;
  }
}
</style>
